<style lang="less">
    @import '../../styles/common.less';
    @import '../../styles/table/table.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col>
                <Card>
                    <p slot="title" style="height:32px;line-height:32px;">
                        <Icon type="android-remove"></Icon>
                        代理商管理
                        <Button type="info" style="float:right" icon="android-add" @click="handleAdd" >新增代理商</Button>
                    </p>
                    <div >
                        <can-edit-table :tableLoading="loading" @on-change="handleChange" @on-error="handleError" @on-info="lockedAgent" @on-router="handleRoute" @on-delete="resetPassword"  refs="table2" v-model="pageData" :columns-list="columns"></can-edit-table>
                    </div>
                    <Page  style="text-align:center;margin-top:20px" @on-change="getData" :total="pageInfo.total" :page-size="size" :current="pageInfo.current" size="small" show-elevator show-total></Page>
                </Card>
            </Col>

        </Row>
        <Modal v-model="modelShow" title="代理商添加" ok-text="添加" :loading="loading" @on-ok="ok" @on-cancel="cancel">
            <Form ref="newAgent" :model="newAgent" :rules="newAgentRules" :label-width="120">
                <FormItem label="代理商账号：" prop="username">
                    <Input v-model="newAgent.username" type="text"></Input>
                </FormItem>
                <FormItem label="代理商密码：" prop="password">
                    <Input v-model="newAgent.password" type="password"></Input>
                </FormItem>
                <FormItem label="代理商真实姓名：" prop="realname">
                    <Input v-model="newAgent.realname" type="text"></Input>
                </FormItem>
                <FormItem label="代理商电话：" prop="phone">
                    <Input v-model="newAgent.phone" type="text"></Input>
                </FormItem>
                <FormItem label="代理商邮箱：">
                    <Input v-model="newAgent.email" type="text"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import canEditTable from './components/canEditTable_agentuser.vue';
import columns from './components/agent_columns_data.js';
import formatDate from 'utils/time';
import {
  getAgentPage,
  getAgentAll,
  addAgent,
  resetAgent,
  putAgent
} from 'api/lx/member/agent';
export default {
    name: 'editable-table',
    components: {
        canEditTable
    },
    data () {
        return {
            loading:true,
            page: 1,
            size: 10,
            columns: [],
            pageInfo: '',
            pageData: [],
            modelShow: false,
            newAgent: {},
            newAgentRules: {
                username: [{
                    required: true,
                    message: '请输入代理商账号',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入代理商密码',
                    trigger: 'blur'
                }],
                realname: [{
                    required: true,
                    message: '请输入代理商真实姓名',
                    trigger: 'blur'
                }],
                phone: [{
                    required: true,
                    message: '请输入电话',
                    trigger: 'blur'
                }]
            }
        };
    },
    methods: {
        initColumns () {
            this.columns = columns;
        },
        getData (page) {
           this.page = page;
           this.loading = true;
          getAgentPage(page,this.size).then(data => {
            this.loading = false;
            if (data.status === 200) {
              this.pageInfo = data.data;
              this.pageData = data.data.records;
            } else {
              this.$Message.error(data.message);
            }
          }).catch(error => {
              this.$Message.error('服务器异常' + error);
          });
        },
        resetPassword (username,fourback) {
           console.error(username);
           resetAgent({username:username,password:"123456"}).then(data => {
             fourback();
             if (data.status === 200) {
               this.$Message.success('重置成功！请及时登录修改密码');
               this.getData (this.page);
             } else {
               this.$Message.error(data.message);
             }
           }).catch(error => {
               this.$Message.error('服务器异常' + error);
           });
        },
        handleChange (val, index) {
            this.$Message.success('修改了第' + (index + 1) + '行数据');
        },
        lockedAgent (query,fourback) {
          //console.error(query);
          putAgent(query).then(data => {
            fourback();
            if (data.status === 200) {
              this.$Message.success('操作成功！');
              this.getData (this.page);
            } else {
              this.$Message.error(data.message);
            }
          }).catch(error => {
              this.$Message.error('服务器异常' + error);
          });
        },
        handleRoute (query) {
          this.$router.push({
              name: 'agent_info',
              query: query
          });
        },
        handleError (message) {
            this.getData(this.page);
            this.$Message.error(message);
        },
        handleAdd() {
            this.newAgent = {};
            this.modelShow = true;
        },
        ok() {
            this.$refs['newAgent'].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    addAgent(this.newAgent).then(data => {
                        this.loading = false;
                        if (data.status === 200) {
                            this.$Message.success(data.message);
                            this.getData(this.page);
                        } else {
                            this.$Message.error(data.message);
                        }
                    }).catch(error => {
                        this.loading = false;
                        this.$Message.error('服务器异常' + error);
                    });
                } else {
                    setTimeout(() => {
                        this.modelShow = true;
                    }, 100);
                    this.$Message.error('请输入完整信息');
                }
            });
            //this.$Message.error(JSON.stringify(this.newPermission));

            //this.$Message.info('Clicked ok');
        },
        cancel() {
            //this.$Message.info('Clicked cancel');
        }
    },
    created () {
        this.initColumns();
        this.getData(1);
    }
};
</script>
